import React, { useEffect, useRef, useState } from "react";
import { Row, Col } from "antd";
import ReactECharts from "echarts-for-react";
import axios from "axios";
import { getEchartsList } from "@/api";
import { useNavigate } from "react-router-dom";

const Index: React.FC = () => {
  const [titles, setTitles] = useState<string[]>([]);
  const [lists, setLists] = useState<number[]>([]);
  const navigate = useNavigate();
  const option = {
    tooltip: {},
    xAxis: {
      data: titles,
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: lists,
      },
    ],
  };

  const option1 = {
    tooltip: {},
    xAxis: {
      data: titles,
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "line",
        data: lists,
      },
    ],
  };
  const onEvents = {
    click(e) {
      const { name } = e;
      navigate("/list/mange?type=" + name);
    },
  };

  const fetchData = async () => {
    try {
      const resp = await getEchartsList();
      const data: string[] = [],
        list: number[] = [];
      Object.entries(resp.data.data).map(([key, values]) => {
        data.push(key);
        list.push(values as number);
      });
      setTitles(data);
      setLists(list);
    } catch (err) {
      console.log("请求报错", err);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      <Row>
        <Col span={12} style={{ padding: 6 }}>
          <ReactECharts
            style={{ height: 400 }}
            option={option}
            onEvents={onEvents}
          />
        </Col>
        <Col span={12} style={{ padding: 6 }}>
          <ReactECharts style={{ height: 400 }} option={option1} />
        </Col>
      </Row>
    </div>
  );
};

export default Index;
